<template>
  <div>
    <div>杰瑞:{{ count }}</div>
    <div>杰瑞2:{{ tomCount }}</div>
    <div>{{ showTomCount }}</div>
    <button @click="add1">点击加1</button>
  </div>
</template>

<script>
// import bus from '../../../utils/eventBus'
// 通过map映射方法将vuex中的方法属性导入到组件内，用扩展运算符批量生成，直接使用这些属性与方法，不用再$store.state/getter.xxx获取属性  或$store.dispatch/commit('xxx',参数)使用方法
import { mapState, mapMutations, mapActions, mapGetters } from 'vuex'
export default {
  data() {
    return {
      count: 0
    }
  },
  computed: {
    ...mapState(['tomCount']),
    ...mapGetters(['showTomCount'])

  },
  methods: {
    ...mapMutations(['addTom']),
    ...mapActions(['addTomSync']),
    add1() {
      this.addTomSync(7)
    //   bus.$emit('add-tom', 1)
    //   console.log(this)
    //   this.$store.state.tomCount++  不推荐这种修改
    //   this.$store.commit('addTom', 6)
    //   this.$store.dispatch('addTomSync', 3)
    }
  }

}
</script>

<style>

</style>
